---
title: Alert
description: Used to communicate a state that affects a system, feature or page.
links:
  source: components/alert
  storybook: components-alert--basic
  recipe: alert
---

<ExampleTabs name="alert-basic" />

## Anatomy

```jsx
import { Alert } from '@saas-ui/react/alert'
```

```jsx
<Alert />
```

## Examples

### Description

Use the `children` prop to provide additional context to the alert. This will be
displayed below the alert message.

<ExampleTabs name="alert-with-description" />

### Status

Change the status of the alerts by passing the `status` prop. This affects the
color scheme and icon used. Alert supports `error`, `success`, `warning`, and
`info` statuses.

<ExampleTabs name="alert-with-status" />

### Variants

Use the `variant` prop to change the visual style of the alert. Values can be
either `subtle`, `solid`, `outline`

<ExampleTabs name="alert-with-variants" />

### Custom Icon

Use the `icon` prop to pass a custom icon to the alert. This will override the
default icon for the alert status.

<ExampleTabs name="alert-with-custom-icon" />

## Props

### Root

<PropTable component="Alert" part="Root" />
